/**
 * Created by baichenguang on 2020/2/19.
 */
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var dataBJ = [
    [1, 55, 9, 56, 0.46, 18, 6, "良"],
    [2, 25, 11, 21, 0.65, 34, 9, "优"],
    [3, 56, 7, 63, 0.3, 14, 5, "良"],
    [4, 33, 7, 29, 0.33, 16, 6, "优"],
    [5, 42, 24, 44, 0.76, 40, 16, "优"],
    [6, 82, 58, 90, 1.77, 68, 33, "良"],
    [7, 74, 49, 77, 1.46, 48, 27, "良"],
    [8, 78, 55, 80, 1.29, 59, 29, "良"],
    [9, 267, 216, 280, 4.8, 108, 64, "重度污染"],
    [10, 185, 127, 216, 2.52, 61, 27, "中度污染"],
    [11, 39, 19, 38, 0.57, 31, 15, "优"],
    [12, 41, 11, 40, 0.43, 21, 7, "优"],
    [13, 64, 38, 74, 1.04, 46, 22, "良"],
    [14, 108, 79, 120, 1.7, 75, 41, "轻度污染"],
    [15, 108, 63, 116, 1.48, 44, 26, "轻度污染"],
    [16, 33, 6, 29, 0.34, 13, 5, "优"],
    [17, 94, 66, 110, 1.54, 62, 31, "良"],
    [18, 186, 142, 192, 3.88, 93, 79, "中度污染"],
    [19, 57, 31, 54, 0.96, 32, 14, "良"],
    [20, 22, 8, 17, 0.48, 23, 10, "优"],
    [21, 39, 15, 36, 0.61, 29, 13, "优"],
    [22, 94, 69, 114, 2.08, 73, 39, "良"],
    [23, 99, 73, 110, 2.43, 76, 48, "良"],
    [24, 31, 12, 30, 0.5, 32, 16, "优"],
    [25, 42, 27, 43, 1, 53, 22, "优"],
    [26, 154, 117, 157, 3.05, 92, 58, "中度污染"],
    [27, 234, 185, 230, 4.09, 123, 69, "重度污染"],
    [28, 160, 120, 186, 2.77, 91, 50, "中度污染"],
    [29, 134, 96, 165, 2.76, 83, 41, "轻度污染"],
    [30, 52, 24, 60, 1.03, 50, 21, "良"],
    [31, 46, 5, 49, 0.28, 10, 6, "优"]
];

//date tempera hun PM25 PM10 CO2 uv light voice form rain
var schema = [
    {name: 'date', index: 0, text: '日期'},
    {name: 'tempera', index: 1, text: '温度'},
    {name: 'hun', index: 5, text: '湿度'},
    {name: 'PM25', index: 2, text: 'PM2.5'},
    {name: 'PM10', index: 3, text: 'PM10'},
    {name: 'CO2', index: 4, text: ' CO2'},
    {name: 'uv', index: 6, text: '紫外线强度'},
    {name: 'light', index: 7, text: '光照'},
    {name: 'voice', index: 8, text: '声音'},
    {name: 'form', index: 9, text: '甲醛'},
    {name: 'rain', index: 10, text: '下雨'},
];

var lineStyle = {
    normal: {
        width: 1,
        opacity: 0.5
    }
};

var option = {
    backgroundColor: '#333',
    legend: {
        bottom: 30,
        // data: ['北京', '上海', '广州'],
        data: ['2月'],
        itemGap: 20,
        textStyle: {
            color: '#fff',
            fontSize: 16
        }
    },
    tooltip: {
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (obj) {
            var value = obj[0].value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + obj[0].seriesName + ' ' + value[0] + '日期：'
                + value[7]
                + '</div>'
                + schema[1].text + '：' + value[1] + '<br>'
                + schema[2].text + '：' + value[2] + '<br>'
                + schema[3].text + '：' + value[3] + '<br>'
                + schema[4].text + '：' + value[4] + '<br>'
                + schema[5].text + '：' + value[5] + '<br>'
                + schema[6].text + '：' + value[6] + '<br>'
                + schema[7].text + '：' + value[7] + '<br>'
                + schema[8].text + '：' + value[8] + '<br>'
                + schema[9].text + '：' + value[9] + '<br>'
                + schema[10].text + '：' + value[10] + '<br>';
        }
    },
    // dataZoom: {
    //     show: true,
    //     orient: 'vertical',
    //     parallelAxisIndex: [0]
    // },
    parallelAxis: [
        {
            dim: 0, name: schema[0].text,inverse: true,splitNumber:31, max: 31, nameLocation: 'start'
        },
        {dim: 1, name: schema[1].text},
        {dim: 2, name: schema[2].text},
        {dim: 3, name: schema[3].text},
        {dim: 4, name: schema[4].text},
        {dim: 5, name: schema[5].text},
        {dim: 6, name: schema[6].text},
        {dim: 7, name: schema[7].text},
        {dim: 8, name: schema[8].text},
        {dim: 9, name: schema[9].text},
        {
            dim: 10, name: schema[10].text,
            type: 'category', data: ['下雨', '无雨']
        }
    ],
    visualMap: {
        show: true,
        min: 0,
        max: 150,
        dimension: 2,
        inRange: {
            color: ['#d94e5d', '#eac736', '#50a3ba'].reverse(),
            // colorAlpha: [0, 1]
        }
    },
    parallel: {
        left: '5%',
        right: '18%',
        bottom: 100,
        parallelAxisDefault: {
            type: 'value',
            name: 'AQI指数',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
                color: '#fff',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: '#aaa'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#777'
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff'
            }
        }
    },
    series: [
        // {
        //     name: '2月',
        //     type: 'parallel',
        //     lineStyle: lineStyle,
        //     data: dataBJ
        // }
    ]
};

var getData = function (callback) {
    $.ajax({
        url: "/weather/weatherByMonth.json",
        dataType: "json",
        data: {year: 2020, month: 2},
        type: "GET",
        success: function (result) {
            var res_data = [];
            //day tempera hun PM25 PM10 CO2 uv light voice form rain
            for (var i in result.objects) {
                var cur = result.objects[i];
                var cur_data = [];
                cur_data.push(cur.day);
                cur_data.push(cur.tempera);
                cur_data.push(cur.hun);
                cur_data.push(cur.pm25);
                cur_data.push(cur.pm10);
                cur_data.push(cur.co2);
                cur_data.push(cur.uv);
                cur_data.push(cur.light);
                cur_data.push(cur.voice);
                cur_data.push(cur.form);
                cur_data.push(cur.rain > 0 ? "下雨" : "无雨");

                res_data.push(cur_data);
            }
            callback(res_data)

        },
        error: function (result) {
            debugger;
        }
    });
};
if (option && typeof option === "object") {
    getData(function (data) {
        var serie = {
            name: '2月',
            type: 'parallel',
            lineStyle: lineStyle,
            data: data
        };
        option.series.push(serie);

        myChart.setOption(option, true);
    });
}